<template>
  <div class="container">
    <el-card class="box-card">
      <div v-if="$route.query.id&&$route.query.name" slot="header" class="clearfix">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 表单模块 -->
      <el-form :inline="true" ref="form" :model="form" class="demo-form-inline">
        <el-row>
          <el-col :span="7">
            <el-form-item class="catalogName" label="标签名称" prop="tagName">
              <el-input v-model="form.tagName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="stateID">
              <el-select v-model="form.stateID" placeholder="请选择">
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-button @click="resetForm('form')">清除</el-button>
            <el-button type="primary" @click="doSearch">搜索</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button
              v-if="$route.query.id&&$route.query.name"
              icon="el-icon-arrow-left"
              size="small"
              @click="backToSubject"
            >返回学科</el-button>
            <el-button icon="el-icon-edit" type="success" size="small" @click="HandleAdd">新增标签</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 消息提示模块 -->
      <el-alert :title="`数据一共 ${counts} 条`" type="info" show-icon :closable="false"></el-alert>
      <br />
      <!-- 列表格模块 -->
      <el-table :data="tagsList" style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="120" align="center"></el-table-column>
        <el-table-column prop="tagName" label="标签名称" width="120" align="center"></el-table-column>
        <el-table-column prop="username" label="创建者" width="150" align="center"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.addDate|parseTimeByString}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state==1" type="success">已启用</el-tag>
            <el-tag v-if="scope.row.state==0" type="danger">已禁用</el-tag>
          </template>
        </el-table-column>
        <!-- 表格操作按钮模块 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.state===1"
              @click="toggleState(scope.row)"
              type="info"
              icon="el-icon-lock"
              round
            >&nbsp;禁用</el-button>
            <el-button
              size="mini"
              v-if="scope.row.state===0"
              @click="toggleState(scope.row)"
              type="success"
              icon="el-icon-unlock"
              round
            >&nbsp;启用</el-button>
            <el-button
              :disabled="scope.row.state===1"
              @click="handleEdit(scope.row)"
              size="mini"
              icon="el-icon-edit"
              round
            >&nbsp;修改</el-button>
            <el-button
              :disabled="scope.row.state===1"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              round
              @click="delTag(scope.$index,scope.row)"
            >&nbsp;删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页模块 -->
      <el-pagination
        class="page"
        @current-change="pageChange"
        :current-page="page"
        style="float: right"
        background
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        @size-change="sizeChange"
        layout="prev, pager, next, sizes, jumper"
        :total="counts"
      ></el-pagination>
    </el-card>
    <!-- 点击修改弹出对话框 -->
    <!-- <TagsAdd :subjectID="subjectID" :tagName="tagName" :id="id" ref="son1"></TagsAdd> -->
    <TagAdd ref="son1"></TagAdd>
  </div>
</template>

<script>
import { list, changeState, remove } from "@/api/hmmm/tags"
import { parseTimeByString } from "@/filters/index"
import TagsAdd from "@/module-hmmm/components/tags-add"
import TagAdd from "@/module-hmmm/components/tag-add"

export default {
  data () {
    return {
      // 表单数据
      form: {
        tagName: '',
        stateID: null,
      },
      counts: 0,
      tagsList: [],
      page: 1,
      pagesize: 10,
      receiveSubjectID: this.$route.query.id,
      // TagsAdd组件数据

      subjectID: null,
      tagName: '',
      id: 0
    }
  },
  mounted () {
    this.getTagsList()
  },
  components: { TagsAdd, TagAdd },
  methods: {
    //重置表单内容
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 获取表签列表
    async getTagsList () {
      try {
        const res = await list({
          page: this.page,
          pagesize: this.pagesize,
          tagName: this.form.tagName,
          subjectID: this.receiveSubjectID,
          state: this.form.stateID
        })

        this.tagsList = res.data.items
        this.counts = res.data.counts

      } catch (err) {
        console.log(err);
      }
    },
    // 切换页码
    pageChange (page) {
      this.page = page
      this.getTagsList()
    },
    // 切换每页显示条数
    sizeChange (pagesize) {
      this.pagesize = pagesize
      this.page = 1
      this.getTagsList()
    },
    //搜索功能
    async doSearch () {

      try {
        const res = await list({
          tagName: this.form.tagName,
          subjectID: this.receiveSubjectID,
          state: this.form.stateID
        })
        this.tagsList = res.data.items
        this.counts = res.data.counts
        this.page = 1
      } catch (err) {
        console.log(err);
      }
    },
    // 更改状态功能
    async toggleState (row) {
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        row.state = row.state === 1 ? 0 : 1
        // this.getTagsList()
      } catch (err) {
        console.log(err);
      }
    },
    //返回学科
    backToSubject () {
      this.$router.push({
        path: '/subjects/list'
      })
    },
    // 修改功能
    handleEdit (row) {
      this.$nextTick(() => {
        this.$refs.son1.showDialog1(row)
      })
      // this.subjectID = row.subjectID
      // this.tagName = row.tagName
      // this.id = row.id
    },
    // 添加标签功能
    HandleAdd () {
      this.$refs.son1.showDialog()
    },
    delTag (index, row) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({
          id: row.id
        }).then(() => {
          // this.tagsList.splice(index, 1)
          if (this.tagsList.length === 1) {
            // this.page = this.page - 1
            this.page -= 1
          }
          this.getTagsList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
  }
}
</script>

<style scoped lang='less'>
.container {
  .box-card {
    width: 97%;
    margin: 20px;

    padding: 5px;
    /deep/.el-form {
      .el-form-item__label {
        font-size: 15px;
        font-weight: 700;
      }
      .catalogName {
        margin-left: 10px;
      }
    }
    .page {
      margin-top: 5px;
      margin-bottom: 15px;
    }
  }
}
</style>
